<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body  style="width: 100% ;height: 100%;border: red solid 1px ;margin: 0">
<img id="myImg" src="1.jpg" style=" width:200px; height:200px"  onmouseover="max()" onmouseleave="min()">
</body>
<script>

    var width = 200;
    var height = 200;

    function max(){
        widthMax = width * 2;
        heightMax = height * 2;
        method01();
    }
    function min(){
        widthMax = width / 2;
        heightMax = height / 2;
        method02();
    }
  function method01(event){
    let myImg = document.getElementById("myImg");
      width++;
      height++;
      if (width<widthMax){
          setTimeout(method01,10);
          myImg.style.cssText = " width:"+ width +"px; height:"+height+"px"
      }
  }
  function method02(event){

      let myImg = document.getElementById("myImg");
      width--;
      height--;
      if (width>widthMax){
          setTimeout(method02,10);
          myImg.style.cssText = " width:"+ width +"px; height:"+height+"px"
      }
  }
</script>
</html>